<template>
  <d2-container class="page">
    <template slot="header">
        <div>
          今日销售额：{{Today}}
        </div>
    </template>
    <div style="height:100%" v-show="isShow1">
      <baidu-map class="map" :center="map.center" :zoom="map.zoom" @ready="handler">
          <!--缩放-->
          <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
          <!--定位-->
          <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
          <!--点-->
          <bm-point-collection :points="points" color="red" size="BMAP_POINT_SIZE_SMALL" @click="clickHandler"></bm-point-collection>
          <bm-marker :position="map.center" :dragging="map.dragging" animation="BMAP_ANIMATION_DROP">
            <!--提示信息-->
            <!-- <bm-info-window :show="map.show">云端锦医试点</bm-info-window> -->
          </bm-marker>
        </baidu-map>
    </div>
    <div style="height:100%;width: 100%;" v-show="isShow2">
      <div id="Sales" style="height:100%;width: 100%;"/>
    </div>
    <div style="height:100%;width: 100%;" v-show="isShow3">
      <div id="SaleRate" style="height:100%;width: 100%;"/>
    </div>

    <template slot="footer">
        <div>
          <el-row>
            <el-col :span="12" :offset="6">
              <el-row>
                <el-col :span="8"><el-button type="primary" round @click="changeIsShow(1)">地图</el-button></el-col>
                <el-col :span="8"><el-button type="primary" round @click="changeIsShow(2)">销售额</el-button></el-col>
                <!-- <el-col :span="6"><el-button type="primary" round @click="changeIsShow(3)">销售排行</el-button></el-col> -->
                <el-col :span="8"><el-button type="primary" round @click="toUndeal()">待处理订单</el-button></el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
    </template>
  </d2-container>
</template>

<script>
import * as echarts from 'echarts'
import $ from 'jquery';
import { request } from '@/api/service';
export default {
  name: "demo",
  data: () => ({
    map:{
      center: {lng: 118.09278,lat: 24.631678},
      zoom: 15,
      show: true,
      dragging: true
    },
    points: [
      /* {lng: 118.087,lat: 24.6218},
      {lng: 118.087,lat: 24.6338},
      {lng: 118.06,lat: 24.6299},
      {lng: 118.075,lat: 24.612},
      {lng: 118.101,lat: 24.5815},
      {lng: 118.151,lat: 25.59} */
    ],
    Today:'',
    shop:[],
    salesData:[],
    isShow1:true,
    isShow2:false,
    isShow3:false,
  }),
  methods: {
    handler ({BMap, map}) {
      let me = this;
      console.log(BMap, map)
      // 鼠标缩放
      map.enableScrollWheelZoom(true);
      // 点击事件获取经纬度
      map.addEventListener('click', function (e) {
          console.log(e.point.lng, e.point.lat)
      })
    },
    toUndeal () {
      this.$router.push({
        name: 'pendingOrder'
      })
    },
    getToday(){
      request({
        url:'index/gettoday',
        methods:'get'
      }).then(res=>{
        this.Today = res;
      })
    },
    getSales(){
      request({
        url:'index/getsales',
        methods:'get'
      }).then(res=>{
        this.salesData = res;
      })
    },
    getpoints(){
      request({
        url:'index/getpoints',
        methods:'get'
      }).then(res=>{
        this.shop=res.list;
        console.log(res.list[0].longitude);
        const points = [];
        for(var i=0;i<res.list.length;i++){
          
          const point = {lng:res.list[i].longitude,lat:res.list[i].latitude};
          points.push(point);
          /* const position = {lng: res[i].longitude, lat: res[i].latitude}; */
        }
        this.points = points;
      })
    },
    drawSales(salesData){
        var myChart = echarts.init(document.getElementById('Sales'));
        var option = {
            title: { text: '销售额' },
            tooltip: {},
            legend: {},
            xAxis: {
              type: 'category',
              data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: salesData,
                type: 'line'
              }
            ]
        };
        myChart.setOption(option);
        $(window).resize(myChart.resize);
    },
    /* drawSaleRate(){
        var myChart = echarts.init(document.getElementById('SaleRate'));
        var option = {
            title: { text: '销量排行' },
            tooltip: {},
            legend: {},
            xAxis: {
              type: 'category',
              data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [150, 230, 224, 218, 135, 147, 260, 224, 218, 135, 147, 260],
                type: 'bar'
              }
            ]
        };
        myChart.setOption(option);
        $(window).resize(myChart.resize);
    }, */
    changeIsShow(num){
      if(num==1){
        this.isShow1=false;
        this.isShow2=false;
        this.isShow3=false;
        this.isShow4=false;
        this.isShow1=true;
      }
      else if(num==2){
        this.isShow1=false;
        this.isShow2=false;
        this.isShow3=false;
        this.isShow4=false;
        this.isShow2=true;
      }
      
      else if(num==4){
        this.isShow1=false;
        this.isShow2=false;
        this.isShow3=false;
        this.isShow4=false;
        this.isShow4=true;
      }
      else if(num==3){
        this.isShow1=false;
        this.isShow2=false;
        this.isShow3=false;
        this.isShow4=false;
        this.isShow3=true;
      }
    }
  },
  created(){
    this.getpoints();
    this.getToday();
    this.getSales();
    
    $(document).ready(this.drawSales(this.salesData));
    /* $(document).ready(this.drawSaleRate()); */
    $(window).trigger('resize');
    
  },
  updated(){
    $(document).ready(this.drawSales(this.salesData));
    /* $(document).ready(this.drawSaleRate()); */
    $(window).trigger('resize');
  },
  mounted(){
    this.getpoints();
    $(window).trigger('resize');
  }
}
</script>

<style lang="scss" scoped>
.page {
  .logo {
    width: 120px;
  }
  .btn-group {
    color: $color-text-placehoder;
    font-size: 12px;
    line-height: 12px;
    margin-top: 0px;
    margin-bottom: 20px;
    .btn-group__btn {
      color: $color-text-sub;
      &:hover {
        color: $color-text-main;
      }
      &.btn-group__btn--link {
        color: $color-primary;
      }
    }
  }
}
.map {
  width: 100%;
  height: 100%;
}
</style>
